<template>
  <div class="order_box">
    <van-nav-bar title="我的订单" @click-left="$router.go(-1)">
      <template #left>
        <van-icon class="back_icon" name="arrow-left" />
      </template>
    </van-nav-bar>
    <div class="header_contant">
      <div class="header_box">
        <div
          @click="filterIndex = i"
          :class="filterIndex === i ? 'hader_item isSele': 'hader_item'"
          v-for="(item, i) in ['全部','待付款','已付款','待收货','已收货']"
          :key="i"
        >
          {{item}}
          <span v-if="filterIndex === i"></span>
        </div>
      </div>
    </div>
    <div class="shop_cart_box">
      <div class="shop_cart_contant">
        <div class="shop_box" v-for="(item ,i) in [1,2]" :key="i">
          <div class="flex">
            <div class="check_box">
              <div class="c_1">满天星起点点</div>
              <div class="c_2">A级认证</div>
              <van-icon name="arrow" />
            </div>
            <div class="ri_che">
              <van-icon name="chat-o" color="#07c160" />&nbsp; 联系买家
            </div>
          </div>
          <div class="order_num">订单编号：20204564564654</div>
          <div class="g_1">
            <goods-card isOrder="1" />
          </div>
          <div class="freight">
            <div class="freight_flex">
              <div class="freight_1">运费方式</div>
              <div class="freight_2">字体</div>
            </div>
            <div class="freight_flex">
              <div class="freight_1">运费</div>
              <div class="freight_2">￥16.45</div>
            </div>
            <div class="explain">
              物流费用为预收机制，以实际物流费用为准，多退少补，退的物流费用会
              退款到你的余额账户。
            </div>
            <div class="freight_flex">
              <div class="freight_1">服务费</div>
              <div class="freight_2">￥16.45</div>
            </div>
            <div class="freight_flex">
              <div class="freight_1">打包费</div>
              <div class="freight_2">￥16.45</div>
            </div>
            <div class="freight_flex">
              <div class="freight_1">优惠</div>
              <div class="freight_3">-16.45</div>
            </div>
            <div class="freight_flex">
              <div class="freight_1">抵扣</div>
              <div class="freight_3">-16.45</div>
            </div>
          </div>
          <div class="total_box">
            <div class="flex">
              <div class="freight_flex">
                <div class="freight_1">总金额：</div>
                <div class="freight_2">￥123</div>
              </div>
              <div class="freight_flex">
                <div class="freight_1">优惠：</div>
                <div class="freight_2">￥123</div>
              </div>
              <div class="freight_flex">
                <div class="freight_1">抵扣：</div>
                <div class="freight_2">￥123</div>
              </div>
            </div>
          </div>
          <div class="freight_flex">
            <div></div>
            <div class="da_1">
              待支付：
              <span class="da_2">￥</span>
              <span>20.02</span>
            </div>
          </div>
          <div class="freight_flex">
            <div></div>
            <div class="btn_box">
              <div class="cancel">取消订单</div>
              <div class="cancel">撤销退款</div>
              <div class="cancel">查看物流</div>
              <div class="buy">立即付款</div>
              <div class="buy">申请仲裁</div>
              <div class="buy">确认收货</div>
              <div class="buy" @click="$router.push('/afterSalesOrder')">申请售后</div>
              <div class="buy" @click="$router.push('/refundMoeny')">申请退款</div>
            </div>
          </div>
          <div class="explain">注意：订单超过30分钟未支付，系统自动关闭订单</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      filterIndex: 0
    };
  }
};
</script>
<style lang="scss" scoped>
.btn_box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .buy {
    width: m-w(201);
    height: 33px;
    background: rgba(0, 198, 88, 1);
    border-radius: 5px;
    font-size: m-w(24);
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cancel {
    margin-right: m-w(31);
    width: m-w(201);
    height: 33px;
    background: rgba(255, 98, 0, 1);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: m-w(24);
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
  }
}
.da_2 {
  font-size: m-w(20);
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(255, 98, 0, 1);
}
.da_1 {
  span {
    font-size: m-w(36);
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(255, 98, 0, 1);
  }
  font-size: m-w(28);
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(52, 52, 52, 1);
}
.freight_3 {
  font-size: m-w(24);
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(255, 98, 0, 1);
}
.explain {
  margin-top: 20px;
  padding: 10px 9px;
  font-size: m-w(20);
  font-family: PingFang SC;
  font-weight: 400;
  background: #f7f9fc;
  color: rgba(170, 174, 192, 1);
}
  .freight_flex {
    @extend .flex;
    margin-top: 20px;
  }
.freight_1 {
  font-size: m-w(24);
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(52, 52, 52, 1);
}
.freight_2 {
  font-size: m-w(24);
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(170, 174, 192, 1);
}
.freight {
  border-top: 1px solid rgba(239, 239, 248, 1);
  border-bottom: 1px solid rgba(239, 239, 248, 1);
  padding-bottom: 15px;
}
.order_num {
  margin-top: 21px;
  margin-bottom: 15px;
  font-size: m-w(24);
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(170, 174, 192, 1);
}
.ri_che {
  i {
    font-size: 15px;
  }
  display: flex;
  align-items: center;
  font-size: m-w(24);
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(52, 52, 52, 1);
}
.tag_box {
  margin-top: 5px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  span {
    margin-top: 5px;
    padding: 2px 8px;
    background: rgba(235, 235, 235, 1);
    font-size: m-w(20);
    margin-right: m-w(18);
    font-family: PingFang SC;
    font-weight: 300;
    color: #a9aec0;
    border-radius: 2px;
  }
}
.t_1 {
  @extend .c_2;
  color: #00c657;
  width: m-w(105);
  border-color: #00c657;
}
.tit_box {
  display: flex;
  align-items: center;
  font-size: m-w(28);
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
}
.infi_box {
  margin-left: m-w(20);
  flex: 1;
}
.pop_img_box {
  width: m-w(260);
  height: 130px;
  border-radius: 5px;
  position: relative;
  img {
    height: 100%;
    width: 100%;
    border-radius: 5px;
  }
  .pop_tag {
    width: m-w(94);
    height: 16px;
    position: absolute;
    left: 0;
    top: 7px;
  }
}
.goods_de_1 {
  display: flex;
  flex: 1;
}
.g_1 {
  display: flex;
  align-items: center;
  padding-bottom: 14px;
}
.g_2 {
  margin-right: 10px;
}
.check_box {
  display: flex;
  align-items: center;
  i {
    color: #a9aec0;
  }
}
.c_1 {
  font-size: m-w(28);
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
}
.c_2 {
  width: m-w(110);
  height: 15px;
  border: 1px solid rgba(255, 98, 0, 1);
  border-radius: 5px 0px 5px 0px;
  font-size: m-w(20);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(255, 98, 0, 1);
  margin-left: m-w(22);
  margin-right: m-w(10);
}
.shop_box {
  background: rgba(255, 255, 255, 1);
  border-radius: m-w(10);
  padding: 15px m-w(20);
  margin-top: 10px;

}
.shop_cart_box {
  width: 100%;
  .shop_cart_contant {
    padding: 0 10px;
  }
}

.back_icon {
  color: #343434;
  font-size: 20px;
}
.header_tit {
  .van-nav-bar .van-icon {
    color: #343434;
    font-size: 15px;
  }
}
.header_box {
  padding: 13px m-w(56);
  display: flex;
  align-items: center;
  justify-content: space-between;
  .hader_item {
    font-size: m-w(26);
    font-family: PingFang SC;
    font-weight: 400;
    position: relative;
    color: rgba(154, 154, 154, 1);
    padding-bottom: 5px;
    span {
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      position: absolute;
      display: block;
      width: m-w(23);
      height: 2px;
      background: #00c658;
    }
  }
  .isSele {
    font-size: m-w(26);
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(52, 52, 52, 1);
  }
}
.order_box {
  width: 100%;
  min-height: 100vh;
  background: #f7f9fc;
}
.header_contant {
  background: white;
}
</style>
